import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Input, Button, Checkbox, message } from 'antd';
import { UserOutlined ,LockOutlined  } from '@ant-design/icons';
import React from 'react'
import './Login.css'
import './login.scss'
import {inject,observer} from "mobx-react";

@inject('login')

@observer

class Login extends React.Component {
  handleSubmit = (e) => {
    e.preventDefault();
    console.log(this.props)
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
        this.props.login.login(values).then(res=>{
          console.log(res);
          message.success(res, 5);
          this.props.history.push("/Home")
        })
      }
    });
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    return  (
        <div className={"container"}>
        <Form
            name="normal_login"
            className="login-form"
            onSubmit={this.handleSubmit}
        >
          <Form.Item
              name="username"
          >
            {getFieldDecorator('username', {
              rules: [{ required: true, message: 'Please input your username!' }],
            })(
                <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
            )}
          </Form.Item>
          <Form.Item
              name="password"

          >
            {getFieldDecorator('password', {
              rules: [{ required: true, message: 'Please input your Password!' }],
            })(
                <Input
                    prefix={<LockOutlined className="site-form-item-icon" />}
                    type="password"
                    placeholder="Password"
                />
            )}

          </Form.Item>
          <Form.Item>
              <Checkbox>Remember me</Checkbox>
            <a className="login-form-forgot" href={"javascript;"}>
              Forgot password
            </a>
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit" className="login-form-button">
              Log in
            </Button>
            Or <a href={"javascript;"}>register now!</a>
          </Form.Item>
        </Form>
        </div>
    );
  }
}

export default Form.create()(Login);